<template>
  <div class="books-grid">
    <div v-for="book in books" :key="book.id" class="book-card">
      <div class="book-cover">
        <img :src="book.cover" :alt="book.title" />
      </div>
      <div class="book-content">
        <h3 class="book-title">{{ book.title }}</h3>
        <p class="book-description">{{ book.description }}</p>
        <button class="download-btn" @click="downloadBook(book)">📥 下载</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { GetUrl } from "@/apis/allAPI/user"
import appStore from "@/stores"
import { onMounted } from "vue"

const { switchTipStatus } = appStore.homeviewStore
const books = [
  {
    id: 1,
    title: "深入理解计算机系统",
    description: "计算机科学领域的经典教材，从程序员的角度深入理解计算机系统的工作原理。",
    cover: "/backgroundPicture1.jpg",
    downloadUrl: "#",
  },
  {
    id: 2,
    title: "算法导论",
    description: "算法领域的权威教材，涵盖了各种经典算法和数据结构的设计与分析。",
    cover: "backgroundPicture1.jpg",
    downloadUrl: "#",
  },
  {
    id: 3,
    title: "设计模式",
    description: "软件开发中常见设计模式的经典参考书，帮助写出更好的代码。",
    cover: "/backgroundPicture1.jpg",
    downloadUrl: "#",
  },
  {
    id: 4,
    title: "JavaScript高级程序设计",
    description: "JavaScript语言的权威指南，深入讲解语言特性和最佳实践。",
    cover: "/covers/cover2.jpg",
    downloadUrl: "#",
  },
  {
    id: 5,
    title: "Vue.js实战",
    description: "Vue.js框架的实战指南，从入门到精通的完整教程。",
    cover: "/covers/cover1.jpg",
    downloadUrl: "#",
  },
  {
    id: 6,
    title: "React学习手册",
    description: "React框架的全面学习指南，包含hooks、状态管理等核心概念。",
    cover: "/covers/cover2.jpg",
    downloadUrl: "#",
  },
]
const objectKey = "test.txt"
const downloadBook = (book) => {
  GetUrl(
    { type: "book", object_key: objectKey },
    (rData) => {
      window.open(rData, "_self")
    },
    () => {
      switchTipStatus({
        level: "warning",
        msg: "请求失败，请重试",
      })
    }
  )
}

onMounted(() => {
  appStore.homeviewStore.hidePageLoading()
})
</script>

<style scoped>
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 1rem 0;
}

.book-card {
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--border-radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.book-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: rgba(var(--primary-rgb), 0.5);
}

.book-cover {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.book-card:hover .book-cover img {
  transform: scale(1.05);
}

.book-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.book-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text);
  margin-bottom: 0.8rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-description {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.download-btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.download-btn:active {
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .books-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .books-container {
    padding: 1rem;
  }

  .books-title {
    font-size: 2rem;
  }

  .books-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
  }

  .book-content {
    padding: 1rem;
  }

  .book-title {
    font-size: 1.1rem;
  }

  .book-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .books-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .books-title {
    font-size: 1.8rem;
  }

  .book-cover {
    height: 180px;
  }
}
</style>
